<template>
  <div
    class="dialog animated"
    :class="open? 'fadeIn':'fadeOut'"
    v-show="show"
    :style="{visibility: (visible?'visible':'hidden')}"
  >
    <div class="panel animated" :class="open? 'zoomIn':''">
      <div class="title">
        {{title}}
        <div class="close" @click="cancel()"></div>
      </div>
      <div class="form">
        <el-form :model="roleData">
          <el-form-item
            label="角色名称"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '角色名称不能为空'}]"
          >
            <el-input style="width:35%" v-model="roleData.roleName" placeholder="请输入角色名称"></el-input>
            <el-checkbox v-model="isAttaching">是否为附属角色</el-checkbox>
          </el-form-item>
          <el-form-item
            label="角色类型"
            :label-width="formLabelWidth"
            :rules="[
      { required: true, message: '角色类型不能为空'}]"
          >
            <el-select
              v-model="roleData.roleModeIndex"
              placeholder="选择角色类型"
              style="width:35%"
              @change="roleModeChange"
            >
              <el-option
                v-for="item in roleModeList"
                :key="item.label"
                :label="item.label"
                :value="item.index"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btn_div">
          <div class="btn_sure" @click="sure()">确 认</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm, $fileInput, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isDisabled: false,
      isAttaching: false,
      title: "",
      roleData: {},
      sysRoledata: [],
      roleModeList: [],
      formLabelWidth: "140px"
    };
  },
  methods: {
    roleModeChange(val) {
      let roleModeItem = vm.roleModeList[vm.roleData.roleModeIndex];
      console.log(roleModeItem);
      let roleMode =
        roleModeItem.parentValue == null
          ? roleModeItem.value
          : roleModeItem.parentValue;
      vm.sysRoledata = [];
      api.sysRoleList({ roleMode: roleMode }).then(function(data) {
        vm.sysRoledata = data.menuList;
      });
    },
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      //获取数据字典
      let dicdata = tool.getItem(lsKey.dict, true);
      vm.sysRoledata = [];
      //获取角色层级
      api.listRoleMode().then(function(datas) {
        for (let i = 0; i < datas.list.length; i++) {
          if (datas.list[i].value <= user.roleMode) {
            datas.list[i].disabled = true;
          } else {
            datas.list[i].disabled = false;
          }
          if (
            (user.roleMode == 0 || user.roleMode == 1) &&
            datas.list[i].parentValue
          ) {
            datas.list[i].disabled = false;
          }

          if (user.roleMode == 2 && datas.list[i].parentValue) {
            datas.list[i].disabled = true;
          }
        }
        vm.roleModeList = datas.list;
        vm.title = "新增角色";
        vm.roleData = {
          roleName: "",
          menuIdList: [],
          roleModeIndex: "",
          roleMode: "",
          childRoleMode: "",
          isAttaching: "",
          remark: ""
        };
      });
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.roleData = {
        roleName: "",
        menuIdList: [],
        roleModeIndex: "",
        roleMode: "",
        childRoleMode: "",
        remark: ""
      };
      vm.sysRoledata = [];
      vm.isAttaching = false;
      setTimeout(function() {
        vm.isShow = false;
        vm.show = false;
        vm.visible = false;
      }, 500);
    },
    sure: function() {
      if (vm.roleData.roleName == "") {
        this.$message.warning("角色名称不能为空");
        return;
      }
      if (!tool.judge("classname", vm.roleData.roleName)) {
        this.$message.warning("请输入有效的角色名称");
        return;
      }
      if (vm.roleData.roleModeIndex + "" == "") {
        this.$message.warning("角色类型不能为空");
        return;
      }
      vm.roleData.isAttaching = vm.isAttaching ? "1" : "0";
      vm.roleData._wait = "请稍后";
      let roleModeItem = vm.roleModeList[vm.roleData.roleModeIndex];
      vm.roleData.roleMode =
        roleModeItem.parentValue == null
          ? roleModeItem.value
          : roleModeItem.parentValue;
      vm.roleData.childRoleMode =
        roleModeItem.parentValue == null ? null : roleModeItem.value;
        if (user.roleMode == 2) {
        vm.roleData.campusId = vm.$store.state.campusId;
        }
      api.roleAdd(vm.roleData).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "添加成功",
            type: "success"
          });
          vm.$emit("callback", "添加成功");
          vm.cancel();
        } else {
          vm.$message.error(data.message);
        }
      });
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 12rem;
}
.line_from {
  height: 1px;
  margin: 0.24rem 0.5rem 0.18rem 0.5rem;
  background-color: #f3f6fc;
}
.form {
  padding: 0 0.3rem 0.3rem 0;
  font-size: 0.16rem;
  color: #666666;
}
</style>
